<style lang="scss" scoped>
  .commonecharts_body {
    margin: 15px 15px 0px 15px;
    h4 {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .echart_container {
      width: 400px;
      /*min-width: 300px;*/
      height: 240px;
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container" :class="'echart_container_' + commonEchartsObj.echarts_name">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: {
      commonEchartsObj: {
        type: Object,
        required: true
      },
      wan: {
        type: Boolean,
        required: true
      },
      percent: {
        type: Boolean,
        required: false
      }
    },
    mounted() {

    },
    methods: {
      initEcharts() {
        let that = this;
        const Echarts_container = '.echart_container_' + this.commonEchartsObj.echarts_name;
        const myChart = echarts.init(document.querySelectorAll(Echarts_container)[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
          animation: false,
          legend: {
            top: 20,
            left:50
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12 * window.$ratio
            },
            extraCssText: 'z-index:999;',
            backgroundColor: 'rgba(0,0,0,0.7)',
            padding: 10,
//            position: function (pos, params, dom, rect, size) {
//              // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
//              var obj = {top: 60};
//              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
//              return obj;
//            },
//            formatter: function (param) {
//              var  result = moment(param[0].axisValue, 'MM/DD').format('YYYY-MM-DD') + "</br>";
//              try {
//                param.forEach((item, index) => {
//                  item.marker = item.marker.replace(/10px/g, 5 * window.$ratio + 'px')
//                  item.marker = item.marker.replace(/#[0-9a-zA-Z]{6};/g, that.commonEchartsObj.line_list[index].lineStyle.color)
//                  result += item.marker + " " + item.seriesName + " : " + item.value  + (that.wan?'万 ':'') +(that.percent?'% ':'')+"</br>";
//                });
//              } catch (e) {
//                console.log(e);
//              }
//              return result;
//            }
          },
//          grid: {
//            left: '0%',
//            right: '4%',
//            top: window.$ratio * 20,
//            bottom: '3%',
//            containLabel: true
//          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.commonEchartsObj.line_date,
            axisLine: {
              lineStyle: {
                color: '#99999A'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter:(value) => {
                if(value >= 10000){
                  value = (value / 10000) + 'W';
                }
                return value;
              },
              fontSize: window.$ratio * 12,
              color: '#99999A'
            },
            axisLine: {
              lineStyle: {
                color: 'transparent'
              }
            },
            minInterval: 1
          },
          series: this.commonEchartsObj.line_list
        };
        myChart.setOption(option);
      }

    },
    watch: {
      'commonEchartsObj': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
